<template>
	<view class="">
		<view class=" just-xc">
			<view class="topinput aj-center">
				<view class="inputimg mr20">
					<image src="../../static/search.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="mt-16">
			<swiper class="w-750 h-350" :indicator-dots="true" indicator-active-color="#A67016"  indicator-color="#ffffff":autoplay="true" :interval="5000"  >
				<swiper-item  class=" swiper-item w-750">
					<image src="../../static/swiper.png" mode=""></image>
				</swiper-item>
				<swiper-item indicator-active-color="#A67016" class=" swiper-item w-750">
					<image src="../../static/swiper.png" mode=""></image>
				</swiper-item>

			</swiper>
		</view>
		<!-- card -->
		<view class="px-28 m-10 flex-wrap w-750" style="box-sizing: border-box;">
			<view class="card aj-center" v-for="item in cardList" :key="item.id">
				<view class="" style="width: 92rpx;height: 92rpx;">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="">
					<view class="doct">
						{{item.title}}
					</view>
					<view class="longdoct">
						{{item.lastname}}
					</view>
				</view>
			</view>

		</view>
		<!-- 店铺 -->
		<view class="bg-ff just-between bshow  dp content" style="	border-radius: 18px;">
			<view class="sqmd pl-28">
				<view class="mz">
					社区门诊店
				</view>
				<view class="baom">
					专家问诊 线上报名
				</view>
				<view class="sqmd_button aj-center content">
					点击进入
				</view>
				<view class="" style="width: 238rpx;height: 153rpx;">
					<image src="../../static/sq.png" mode=""></image>
				</view>
			</view>
			<view class="">

				<view class="p-36-20 bor-r18 just-between bg-F5FDFF">
					<view class="">
						<view class="f-30 f-bold c-11 ">
							咨询互动
						</view>
						<view class="c77 fs-22 f-w" style="margin-right:51rpx">
							在线咨询 更方便
						</view>
					</view>
					<view class="" style="width: 60rpx;height: 93rpx;">
						<image src="../../static/phone.png" mode=""></image>
					</view>
				</view>

				<view class="p-36-20 bor-r18 just-between bg-F5FDFF mt-21">
					<view class="">
						<view class="f-30 f-bold c-11 ">
							咨询互动
						</view>
						<view class="c77 f-22 f-w" style="margin-right:51rpx">
							在线咨询 更方便
						</view>
					</view>
					<view class="" style="width: 60rpx;height: 59rpx;">
						<image src="../../static/lw.png" mode=""></image>
					</view>
				</view>
				

			</view>
		</view>
		
		<view class="mt-20" style="margin: 0rpx 20rpx;width: 694rpx;height: 125rpx;margin: 0 auto;">
				<image src="../../static/jfshoop.png" mode=""></image>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				cardList: [{
						id: 1,
						title: '找医生',
						lastname: '更多专家医师',
						img: '../../static/doct.png'
					},
					{
						id: 2,
						title: '医学科普',
						lastname: '更多科普文章',
						img: '../../static/love.png'
					}
				],

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.topinput {
		width: 710rpx;
		height: 64rpx;
		background: #F5F5F5;
		opacity: 1;
		border-radius: 12rpx;

		&::after {
			content: '输入关键字搜索';
			color: #999999;
			font-weight: 400;
			font-size: 26rpx;
		}

		.inputimg {
			width: 30rpx;
			height: 30rpx;
			line-height: 30rpx;

		}
	}

	img {
		width: 100%;
		height: 100%;
	}

	.card {

		width: 335rpx;
		// height: 148rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); 
		// opacity: 1;
		border-radius: 18px;
		padding: 28rpx 0;
		
		
		 

		.doct {
			font-size: 36rpx;
			font-weight: bold;

			color: #111111;

		}

		.longdoct {
			margin-top: 8rpx;
			font-size: 24rpx;
			font-weight: 400;

			color: #777777;

		}
	}

	.dp {
		// width: 694rpx;
		// height: 364rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx rgba(0, 0, 0, 0.1);

		border-radius: 18rpx;
		margin: 20rpx 24rpx;
		padding: 20rpx 24rpx;

		.sqmd {
			width: 314rpx;
			height: 324rpx;
			background: #F5FDFF;
			opacity: 1;
			border-radius: 18rpx;

			.mz {
				font-size: 36rpx;
				font-weight: bold;
				color: #111111;
				margin-bottom: 8rpx;
				padding-top: 26rpx;
			}

			.baom {
				font-size: 24rpx;

				font-weight: 400;

				color: #777777;
			}

			.sqmd_button {
				margin: 10rpx 0rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #00BFCF;
				width: 92rpx;
				height: 34rpx;
				// padding: 3rpx 3rpx;
				background: #FFFFFF;
				border: 1rpx solid #00BFCF;
				opacity: 1;
				border-radius: 6rpx;
			}
		}
	}
</style>
